<template>
  <div class="body_bgi full p_10">
    <bigscreen-header headerName="育成羊002" />

    <div class="w_full h_full-100 flex_row_between p_10">
      <!-- 1 -->
      <div class="w_65_p h_full p_10">
        <div class="w_full h_60 lh_60 flex_row_start">
          <div class="w_300 h_60" v-for="(item, index) in roomList" :key="index">{{ item }}</div>
        </div>

        <div class="w_full h_full-60 chart_box_bgi_1">
          <el-carousel 
            class="color_fff" 
            :autoplay="true" 
            v-if="sheepInfo.images && sheepInfo.images.length"
          >
            <el-carousel-item class="full" v-for="(item, index) in formatAnimalImg(sheepInfo.images)" :key="index">
              <img 
                class="h_full aspect_ratio_16_9 border_radius_5 cursor object_fit_contain" 
                :src="item" alt=""
              >        
            </el-carousel-item>
            <el-carousel-item>
              <!-- <sheep-tree :chartData="chartData" /> -->
            </el-carousel-item>
          </el-carousel>
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_35_p h_full p_10">
        <el-tabs v-model="activeTabName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <div class="full chart_box_bgi_1 color_fff p_10">
              <div class="jian_bian_text_1 fw_bold text_center fs_2vw"><span>基本信息</span></div>
              <div class="w_90_p m_0_auto color_fff border_1_s_ccc fs_2vw mt_10">
                <!-- <div class="w_full border_1_s_ccc pl_10 pv_5">rfid: {{ sheepInfo.rfid }}</div> -->
                <div class="w_full border_1_s_ccc pl_10 pv_5">种羊场: {{ sheepInfo.farmName }}</div>
                <div class="w_full flex_row_between">
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">身高: {{ sheepInfo.height }} cm</div>
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">体长: {{ sheepInfo.tiLength }} cm</div>
                </div>

                <div class="w_full flex_row_between">
                  <!-- <div>出生日期：{{ sheepInfo.birthDate  || ''}}</div> -->
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">体重: {{ sheepInfo.weight }} kg</div>
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">性别：{{ formatAnimalGender(sheepInfo.sex) }}</div>
                </div>
                <div class="w_full flex_row_between">
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">等级：{{ formatLevel(sheepInfo.leaveType) }}</div>
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">胸围: {{ sheepInfo.chest }} cm</div>
                </div>

                <div class="w_full flex_row_between w_full">
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">产毛量: {{ sheepInfo.maoCount }} </div>
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">净重: {{ sheepInfo.netWeight }} kg</div>
                </div>

                <!-- 毛特征 -->
                <div class="w_full flex_row_between">
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">头毛: {{ sheepInfo.touMao }} </div>
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">类型与皱褶: {{ sheepInfo.wrinkling }} </div>
                </div>
                <div class="w_full flex_row_between">
                  <div class="w_50_p border_1_s_ccc pl_10">毛长度: {{ sheepInfo.maoLength }} </div>
                  <div class="w_50_p border_1_s_ccc pl_10">密度: {{ sheepInfo.density }} </div>
                </div>
                <div class="w_full flex_row_between">
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">弯曲度: {{ sheepInfo.wanQu }} </div>
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">细度: {{ sheepInfo.xiDu }} </div>
                </div>
                <div class="w_full flex_row_between">
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">油汗: {{ sheepInfo.oilSweat }} </div>
                  <div class="w_50_p border_1_s_ccc pl_10 pv_5">均匀度: {{ sheepInfo.uniformity }} </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="评分信息" name="sec">
            <div class="full scroll_box overflow_y_auto">
              <div class="w_full h_80 lh_80 fs_30 fw_bold flex_row_between"> 
                <div class="w_50_p color_orange">总得分： 894</div>  
                <div class="w_50_p color_0bfb83">评均分： 89</div>
              </div>

              <div class="w_full h_80 lh_80 flex_row_between color_fff border_b_1_s_ccc fs_25" v-for="(item, index) in 8" :key="index">
                <div class="w_80 h_80 p_5">
                  <img class="full border_radius_10" src="../assets/image/user.png" alt="">
                </div>
                <div class="w_50_p">评委{{ index+1 }}</div>
                <div class="w_50_p">评分  98</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        
      </div>
    </div>
  </div>
</template>

<script>
  import { getRoomList, getCurrentSheep, getSheepScoreDetail } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'

  export default {
    name: 'SheepScore',
    components: { BigscreenHeader },
    data() {
      return {
        activeTabName: 'first',
        sheepInfo: {
          images: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.2gJJQVwaGEDAhl8bWZmNOAHaFl?w=217&h=180&c=7&r=0&o=5&pid=1.7,https://tse2-mm.cn.bing.net/th/id/OIP-C.ljKASo-1xXlc7a6sAW6AGAHaE8?w=266&h=180&c=7&r=0&o=5&pid=1.7'
        },

        roomList: [],

        isActivityStart: false,

        isScore: false,
        timer: null,

        scoreList: []
      }
    },
    async mounted() {
      this.getRoomList()
      this.getCurrentSheep(2)

      var websocket_state = window.sessionStorage.getItem('websocket_state')
      if (!websocket_state || websocket_state != 1) {
        let token = window.sessionStorage.getItem('token')
        let roomId = window.sessionStorage.getItem('roomId')

        if (token && roomId) {
          // 链接 webSocket
          this.connectWebSocket(token, roomId)       
        } else {
          console.log('weocsecket 缺少链接参数！');
        }
      }   

      window.addEventListener('beforeunload', e => {
        console.log('浏览器将要刷新');

        // 断开 websocket 链接 状态
        window.sessionStorage.setItem('websocket_state', 2)
      })
    },
    methods: {
      async getRoomList() {
        let res = await getRoomList()
        try {
          if (res.code == 1000) {
            this.roomList = res.data
          }
        } catch(err) {
          console.log('获取房间列表失败 : ', err);
        }
      },

      // 链接 webSocket 
      connectWebSocket(token, roomId) {
        ws2.init(
          // `ws://192.168.9.87:8133/ws?token=${token}&roomId=${roomId}`,
          `ws://192.168.9.94:8133/ws?token=${token}&roomId=${roomId}`,
          this.token,
          data => {
            try {
              var msg = JSON.parse(data)

              this.webSctMsg = msg

              // 投票界面上 更新 羊的 基本信息
              if (msg.type == 'SheepEntity') {
                if (this.timer) {
                  clearInterval(this.timer)
                }
                 
                // 清空 评分结果
                this.updateWebsocketSheep()

                let websocket_sheep_number = msg.data.sheepNumber

                // 获取房间中的 当前羊
                this.getCurrentSheep(roomId, websocket_sheep_number)

                if (this.isScore) {
                  // 评分状态下 显示，更新界面倒计时， 倒计时结束后 更新界面
                  this.countDown()
                }
              } else if (msg.type == 'SaveSheepScore') {
                if (this.timer) {
                  clearInterval(this.timer)
                }
                
                // 获取 评分详情
                this.getSheepScoreDetail(this.contestId, this.sheepInfo.rfid)
              }
            } catch (err) {
              this.$message.error(err)
            }
          },
          state => {
            console.log("state changed !");

            this.webSctState = state
          }
        )

        window.sessionStorage.setItem('sock', ws2.wsObj)
      },

      // 获取 房间中的 当前羊
      async getCurrentSheep(roomId, sheepNumber) {
        let res = await getCurrentSheep(roomId)
        try {
          if (res.code == 1000 && res.data.sheepNumber) {
            this.isActivityStart = true

            this.sheepInfo = {}
            // this.sheepInfo = res.data

            if (sheepNumber) {
              if (res.data.sheepNumber != sheepNumber) {
                this.sheepInfo = res.data
              } 
            } else {
              this.sheepInfo = res.data
            }

            if (res.data.isScore) {
              this.isScore = res.data.isScore

              // 获取 评分详情
              this.getSheepScoreDetail(this.contestId, this.sheepInfo.rfid)

              this.timer = setInterval(() => {
                // 获取 评分详情
                this.getSheepScoreDetail(this.contestId, this.sheepInfo.rfid)
              }, 2000)
            }
          }
        } catch(err) {
          console.log('获取房间中的当前羊失败 : ', err);
        }
      },

      // 获取 羊 评分详情
      async getSheepScoreDetail(contestId, rfid) {
        let res = await getSheepScoreDetail(contestId, rfid)
        try {
          if (res.code == 1000 && res.message == 'success') {
            this.scoreList = res.data.sheepScoreList

            // 评委 数量
            if (res.data.sheepScoreList && res.data.sheepScoreList.length == 3) {
              clearInterval(this.timer)
            }                       
          }
        } catch(err) {
          console.log('获取羊的评分信息失败 : ', err);
        }
      },

      // 格式化 羊 图片,
      formatAnimalImg(str) {
        let list = str.split(',')

        return list
      },

      formatAnimalGender() {

      },

      formatLevel() {

      }
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #409eff; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }
</style>